余烬缀记

JavaScript 的 this

当一个函数被调用时,会创建一个活动记录 (也被称为上下文)。这个记录会包含函数在哪里被调用 (调用栈),函数的调用方式,传入的参数等信息。this 就是这个记录的一个属性,会在函数执行的过程中用到。

this 指向完全取决于函数在哪里调用。函数默认是在 window 对象下面调用的所以默认的 this 指向是 window, 在严格模式下 this 指向的是 undefined。比如以下代码:

function fn1(){
    console.log(this);
}
fn1(); // window...

function fn2(){
    'use strict'
    console.log(this);
}
fn2(); // undefined

var obj = {
    x:72,
    fn:fn
};
obj.fn(); // obj...

ES5 的函数总是指向的是在哪里被调用的,身处那个对象。当直接调用就属于 window 对象下面的,而严格模式下 this 指向 window 应该是不合理的地方所以指向 undefined。

ES6 的箭头函数也是可以使用 this 的,一般我们使用箭头函数就会避免使用 this 但是还是记一下,箭头函数下 this 在默认指向 window 箭头函数没有 this,在箭头函数里面使用 this 就和使用普通变量而已,严格模式下指向 undefined。箭头函数是没有自己的 this 的,它指向的是外层函数的 this。因为它没有自己的 this 所以不能使用 call,bind 等修改 this 指向的方法。示例代码:


// 非严格
function fn1(){
    var fn = ()=>{console.log('this: ',this)}
    fn()
}
// 严格
fn1(); //window....
function fn2(){
    'use strict'
    var fn = ()=>{console.log('this: ',this)}
    fn()
}
fn2(); //undefined

// 在函数下调用fn2函数

var obj = {
    x:55,
    fn:fn2
}
obj.fn(); //{x: 55, fn: ƒ}